<template>
	<view class="search-page-container">
		<!-- 1. 顶部搜索栏 -->
		<view class="top-bar customHeader">
			<up-icon class="back-arrow" name="arrow-leftward" color="#fff" @click="goBack" />
			<view class="search-input-wrapper">
				<text class="search-icon">🔍</text>
				<input v-model.trim="searchQuery" class="search-input" placeholder="搜索游戏"
					placeholder-class="placeholder" />
			</view>
			<button class="search-button" @click="performSearch">搜索</button>
		</view>

		<!-- 2. 搜索结果 -->
		<view v-if="isSearching && searchResults.length > 0" class="search-results">
			<view v-for="item in searchResults" :key="item.id" class="result-item" @click="selectHotKeyword(item.name)">
				{{ item.name }}
			</view>
		</view>

		<!-- 搜索无结果 -->
		<view v-if="isSearching && searchResults.length === 0" class="no-results">
			<text>无匹配结果</text>
		</view>

		<!-- 3. 热门搜索 (无搜索内容时显示) -->
		<view v-if="!isSearching" class="hot-searches">
			<view class="section-title">热门搜索</view>
			<view class="keywords-container">
				<view v-for="keyword in hotKeywords" :key="keyword" class="keyword-tag"
					@click="selectHotKeyword(keyword)">
					{{ keyword }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from "vue";

	// 搜索输入
	const searchQuery = ref("");

	// 热门搜索关键词
	const hotKeywords = ref([
		"H1Z1",
		"黑色沙漠",
		"阴阳师",
		"英雄联盟",
		"方舟",
		"王者荣耀",
	]);

	// 模拟的全部游戏数据
	const allGames = ref([{
			id: 1,
			name: "王者荣耀"
		},
		{
			id: 2,
			name: "英雄联盟"
		},
		{
			id: 3,
			name: "和平精英"
		},
		{
			id: 4,
			name: "H1Z1"
		},
		{
			id: 5,
			name: "方舟：生存进化"
		},
		{
			id: 6,
			name: "阴阳师"
		},
		{
			id: 7,
			name: "黑色沙漠"
		},
		{
			id: 8,
			name: "原神"
		},
		{
			id: 9,
			name: "游戏攻略"
		},
		{
			id: 10,
			name: "上分秘籍"
		},
		{
			id: 11,
			name: "夺宝皮肤"
		},
		{
			id: 12,
			name: "三角洲行动"
		},
		{
			id: 13,
			name: "绝地求生"
		},
		{
			id: 14,
			name: "原神"
		},
		{
			id: 15,
			name: "明日方舟"
		},
	]);

	// 是否处于搜索状态（输入框有内容）
	const isSearching = computed(() => searchQuery.value.length > 0);

	// 计算搜索结果
	const searchResults = computed(() => {
		if (!isSearching.value) {
			return [];
		}
		return allGames.value.filter((game) =>
			game.name.toLowerCase().includes(searchQuery.value.toLowerCase())
		);
	});

	// 点击热门关键词进行搜索
	const selectHotKeyword = (keyword) => {
		searchQuery.value = keyword;
		performSearch();
	};

	// 点击搜索按钮
	const performSearch = () => {
		uni.navigateTo({
			url: "/pages/search/searchGame?searchQuery=" + searchQuery.value,
		});
	};

	// 返回上一页
	const goBack = () => {
		uni.navigateBack();
	};
</script>

<style scoped>
	.search-page-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #fff;
	}

	/* 顶部栏 */
	.top-bar {
		display: flex;
		align-items: center;
		padding: 16rpx 20rpx;
		background-color: #4caf50;
		/* Green background */
		color: white;
		position: sticky;
		top: 0;
		z-index: 99;
	}

	.back-arrow {
		font-size: 48rpx;
		font-weight: bold;
		padding-right: 20rpx;
		cursor: pointer;
	}

	.search-input-wrapper {
		flex: 1;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 30rpx;
		padding: 0 20rpx;
		height: 60rpx;
	}

	.search-icon {
		font-size: 32rpx;
		margin-right: 10rpx;
		color: #999;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.placeholder {
		color: #bbb;
	}

	.search-button {
		background: none;
		border: none !important;
		color: white;
		font-size: 30rpx;
		padding: 0 20rpx;
		margin: 0;
		line-height: 60rpx;
	}

	/* 热门搜索 */
	.hot-searches {
		padding: 30rpx;
		background: #f2f2f2;
	}

	.section-title {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 20rpx;
	}

	.keywords-container {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.keyword-tag {
		background-color: #ffff;
		padding: 10rpx 24rpx;
		border-radius: 30rpx;
		font-size: 26rpx;
		color: #555;
	}

	/* 搜索结果 */
	.search-results {
		padding: 0 30rpx;
	}

	.result-item {
		padding: 24rpx 0;
		border-bottom: 1px solid #eee;
		font-size: 30rpx;
		color: #333;
	}

	.no-results {
		text-align: center;
		padding-top: 100rpx;
		color: #999;
	}
</style>